<template>
  <div class="trace-code-container">
    <div class="search-section animate__animated animate__fadeInDown">
      <el-input style="width: 300px;margin-right: 20px" placeholder="请输入溯源码" v-model="traceCode" prefix-icon="el-icon-document"></el-input>
      <el-button style="margin-left: 10px;" type="primary" @click="search" class="el-icon-search">查询</el-button>
      <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
      <el-button style="margin-left: 10px;" type="success" @click="showGenerateDialog" class="el-icon-plus">生成溯源码</el-button>
    </div>

    <div class="table-section animate__animated animate__fadeInUp">
      <el-table
          :data="tableData" border stripe
          :header-cell-style="getRowClass"
          @selection-change="handleSelectionChange"
          row-key="id">
        
        <el-table-column prop="traceCode" label="溯源码"></el-table-column>
        <el-table-column prop="origin" label="产地"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="manufacturer" label="生产厂家"></el-table-column>
        <el-table-column prop="createTime" label="生成时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
              {{ scope.row.status === '1' ? '有效' : '无效' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <div class="operation-buttons">
              <el-button size="mini" type="primary" class="el-icon-view" @click="handleView(scope.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="生成溯源码" :visible.sync="generateDialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="产地" prop="origin">
          <el-input v-model="form.origin"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家" prop="manufacturer">
          <el-input v-model="form.manufacturer"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="generateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleGenerate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="溯源信息" :visible.sync="viewDialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="溯源码">{{ viewData.traceCode }}</el-descriptions-item>
        <el-descriptions-item label="产地">{{ viewData.origin }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ viewData.productName }}</el-descriptions-item>
        <el-descriptions-item label="生产厂家">{{ viewData.manufacturer }}</el-descriptions-item>
        <el-descriptions-item label="生成时间">{{ viewData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="viewData.status === '1' ? 'success' : 'info'">
            {{ viewData.status === '1' ? '有效' : '无效' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'animate.css/animate.min.css';

export default {
  name: "TraceCode",
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      traceCode: '',
      tableData: [],
      generateDialogVisible: false,
      viewDialogVisible: false,
      form: {
        origin: '',
        productName: '',
        manufacturer: ''
      },
      viewData: {},
      multipleSelection: [],
      total: 0,
      rules: {
        origin: [
          { required: true, message: '请输入产地', trigger: 'blur' }
        ],
        productName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        manufacturer: [
          { required: true, message: '请输入生产厂家', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.request.get("/trace-code/findAll").then(res => {
        if (res.code === '200') {
          this.tableData = res.data;
          this.total = res.data.length;
        }
      });
    },
    getRowClass({rowIndex, columnIndex}) {
      if(rowIndex === 0) {
        return 'background:#ccc'
      }
    },
    reset() {
      this.traceCode = '';
      this.load();
    },
    search() {
      if (!this.traceCode) {
        this.$message.warning('请输入溯源码');
        return;
      }
      this.request.get("/trace-code/findByCode/" + this.traceCode).then(res => {
        if (res.code === '200') {
          this.tableData = [res.data];
          this.total = 1;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    showGenerateDialog() {
      this.form = {
        origin: '',
        productName: '',
        manufacturer: ''
      };
      this.generateDialogVisible = true;
    },
    handleGenerate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.request.post("/trace-code/save", this.form).then(res => {
            if (res.code === '200') {
              this.$message.success('溯源码生成成功');
              this.generateDialogVisible = false;
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleView(row) {
      this.viewData = JSON.parse(JSON.stringify(row));
      this.viewDialogVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load();
    }
  }
}
</script>

<style scoped>
.trace-code-container {
  padding: 20px;
}

.search-section {
  margin-bottom: 20px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.operation-buttons {
  display: flex;
  gap: 5px;
}

.el-button {
  margin: 0;
}

.el-table {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.el-descriptions {
  margin: 20px 0;
}
</style> 